<template>
  <div class="Banner">
    <el-row>
      <el-button type="success">+添加</el-button>
    </el-row>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="480px"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" text-align="center">
      </el-table-column>
      <el-table-column prop="businessId" label="编号/类型">

      </el-table-column>
      <el-table-column prop="linkUrl" label="业务编号/链接地址">
      </el-table-column>
      <el-table-column prop="title" label="名称">
      </el-table-column>
      <el-table-column label="图标">
        <template slot-scope="{row}">
          <img :src="row.picUrl" alt="" width="70px ">
        </template>
      </el-table-column>

      <el-table-column prop="statusStr" label="状态">
        <template slot-scope="{row}">
          <el-tag type="success" v-if='row.statusStr = "显示"'>正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="address" label="操作" width="300" style="text-align:center">
        <template slot-scope="{row}">

          <el-button type="text" style="color:#409eff" @click="edit(row)"> {{ row.date }}编辑</el-button>
          <el-button type="text" style="color:red" @click="del(row)">删除</el-button>
        </template>


      </el-table-column>
    </el-table>
    <el-button type="danger" @click="delAll">批量删除</el-button>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


  </div>
</template>

<script>
import { banner } from "@/api/index"
export default {
  name: 'Banner',
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      limit: {
        page: 1,
        pageSize: 10
      },
      currentPage: 1,
      total: 10
    }
  },

  methods: {

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 请求接口获取后端数据
    async getAdminlist(params) {
      let { data: res } = await banner(params)
      this.tableData = res.result
      this.total = res.totalRow

    },
    handleSizeChange(val) {
      // 选择多少条信息时 获取条数参数 重新请求接口,且把当前所在的页数默认为1
      console.log(`每页 ${val} 条`);
      this.limit.pageSize = val
      this.currentPage = 1
      this.limit.page = 1
      this.getAdminlist(this.limit)
    },
    handleCurrentChange(val) {
      // 获取到当前页 赋值给page 传给后端请求数据
      console.log(`当前页: ${val}`);
      this.currentPage = val

      this.limit.page = val
      this.getAdminlist(this.limit)

    },
    // 编辑
    edit() {

    },

    // 删除
    del(row) {
      console.log(row)
    },
    // 批量删除
    delAll() {
      // 后端接口需要的是ID,所以需要把获取的数组转成只有id的数组传给后端
      this.multipleSelection = this.multipleSelection.map(r =>
        r.id
      )

    }
  },
  mounted() {
    // 调用接口把参数给进去
    this.getAdminlist(this.limit)
  },
}
</script>
<style lang="scss" scoped>
.BannerManage {

  &::v-deep td,
  th .cell {
    text-align: center;
  }

  &::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
  }
}
</style>